<template>
	<div>
		<div class="record_date">
			<el-row>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">总用户数</div>
							<div class="text_color"><span>{{tableData.totalUsers ? tableData.totalUsers : 0}}</span>人
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">今日新增</div>
							<div class="text_color"><span>{{tableData.newToday ? tableData.newToday : 0}}</span>人</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">本月新增</div>
							<div class="text_color"><span>{{tableData.newMonth ? tableData.newMonth : 0}}</span>人</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">本年新增</div>
							<div class="text_color"><span>{{tableData.newYear ? tableData.newYear : 0}}</span>人</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">总充值 </div>
							<div class="text_color">
								<span>{{tableData.totalRevenue ? tableData.totalRevenue : 0}}</span>元</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">今日充值</div>
							<div class="text_color">
								<span>{{tableData.todayRevenue ? tableData.todayRevenue : 0 }}</span>元</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">本月充值 </div>
							<div class="text_color">
								<span>{{tableData.monthRevenue ? tableData.monthRevenue : 0}}</span>元</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">本年充值</div>
							<div class="text_color"><span>{{tableData.yearRevenue ? tableData.yearRevenue : 0}}</span>元
							</div>
						</div>
					</div>
				</el-col>

			</el-row>
			<div>
				<el-select v-model="flag" style="width:150px;margin-left: 10px;" @change="orderfenxi">
					<el-option v-for="item in flags" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>&nbsp;&nbsp;&nbsp;
				<el-date-picker style="width: 200px;margin-left: 10px;" v-model="info.stockDate" align="right"
					type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间"
					@change="animeOrder">
				</el-date-picker>
			</div>
			<el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 10px;">
				<el-tab-pane label="订单统计" name="first">
					<!-- <el-row>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">订单总数</div>
									<div class="text_color">
										<span>{{taskStat.allCount ? taskStat.allCount : 0}}</span>笔</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待结算订单数</div>
									<div class="text_color">
										<span>{{taskStat.waitSettlementCount ? taskStat.waitSettlementCount : 0}}</span>笔</div>
								</div>
							</div>
						</el-col>
						
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">已结算订单数</div>
									<div class="text_color">
										<span>{{taskStat.settlementCount ? taskStat.settlementCount : 0}}</span>笔</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">退款订单数</div>
									<div class="text_color">
										<span>{{taskStat.refundCount ? taskStat.refundCount : 0}}</span>笔</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待支付订单数</div>
									<div class="text_color">
										<span>{{taskStat.waitPaymentCount ? taskStat.waitPaymentCount : 0}}</span>笔</div>
								</div>
							</div>
						</el-col>
					</el-row>-->
					<el-row>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">总订单</div>
									<div class="text_color">
										<span>{{taskStat.sumXCOrdersCount ? taskStat.sumXCOrdersCount : 0}}</span>单
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待支付订单</div>
									<div class="text_color">
										<span>{{taskStat.dzfXCOrdersCount ? taskStat.dzfXCOrdersCount : 0}}</span>单
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">进行中订单</div>
									<div class="text_color">
										<span>{{taskStat.jxzXCOrdersCount ? taskStat.jxzXCOrdersCount : 0}}</span>单
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">已完成订单</div>
									<div class="text_color">
										<span>{{taskStat.ywcXCOrdersCount ? taskStat.ywcXCOrdersCount : 0}}</span>单
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">已退款订单</div>
									<div class="text_color">
										<span>{{taskStat.ytkXCOrdersCount ? taskStat.ytkXCOrdersCount : 0}}</span>单
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待接单订单</div>
									<div class="text_color">
										<span>{{taskStat.dqdXCOrdersCount ? taskStat.dqdXCOrdersCount : 0}}</span>单
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待服务订单</div>
									<div class="text_color">
										<span>{{taskStat.dfwXCOrdersCount ? taskStat.dfwXCOrdersCount : 0}}</span>单
									</div>
								</div>
							</div>
						</el-col>
						<!-- <el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">用户待确认订单</div>
									<div class="text_color">
										<span>{{taskStat.dqrXCOrdersCount ? taskStat.dqrXCOrdersCount : 0}}</span>单
									</div>
								</div>
							</div>
						</el-col> -->
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">总金额</div>
									<div class="text_color">
										<span>{{taskStat.sumXCOrdersMoney ? taskStat.sumXCOrdersMoney : 0}}</span>元
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待支付金额</div>
									<div class="text_color">
										<span>{{taskStat.dzfXCOrdersMoney ? taskStat.dzfXCOrdersMoney : 0}}</span>元
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">进行中金额</div>
									<div class="text_color">
										<span>{{taskStat.jxzXCOrdersMoney ? taskStat.jxzXCOrdersMoney : 0}}</span>元
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">已完成金额</div>
									<div class="text_color">
										<span>{{taskStat.ywcXCOrdersMoney ? taskStat.ywcXCOrdersMoney : 0}}</span>元
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">已退款金额</div>
									<div class="text_color">
										<span>{{taskStat.ytkXCOrdersMoney ? taskStat.ytkXCOrdersMoney : 0}}</span>元
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待接单金额</div>
									<div class="text_color">
										<span>{{taskStat.dqdXCOrdersMoney ? taskStat.dqdXCOrdersMoney : 0}}</span>元
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待服务金额</div>
									<div class="text_color">
										<span>{{taskStat.dfwXCOrdersMoney ? taskStat.dfwXCOrdersMoney : 0}}</span>元
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
				<!-- <el-tab-pane label="订单收入统计" name="orders">
					<el-row>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">订单总金额</div>
									<div class="text_color">
										<span>{{tableData2.allMoney ? tableData2.allMoney : 0}}</span>元</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">订单总收入金额</div>
									<div class="text_color">
										<span>{{tableData2.income ? tableData2.income : 0}}</span>元</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">订单待支付金额</div>
									<div class="text_color">
										<span>{{tableData2.waitPayment ? tableData2.waitPayment : 0}}</span>元</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">订单退款金额</div>
									<div class="text_color">
										<span>{{tableData2.refund ? tableData2.refund : 0}}</span>元</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">订单待结算金额</div>
									<div class="text_color">
										<span>{{tableData2.settlement ? tableData2.settlement : 0}}</span>元</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane> -->
				<el-tab-pane label="用户分析" name="userF">
					<el-row>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">总用户</div>
									<div class="text_color">
										<span>{{userStat.sumUserCount ? userStat.sumUserCount : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">普通用户</div>
									<div class="text_color">
										<span>{{userStat.userCount ? userStat.userCount : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">会员用户</div>
									<div class="text_color">
										<span>{{userStat.memberCount ? userStat.memberCount : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">H5用户</div>
									<div class="text_color">
										<span>{{userStat.h5Count ? userStat.h5Count : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">APP用户</div>
									<div class="text_color">
										<span>{{userStat.appCount ? userStat.appCount : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">小程序用户</div>
									<div class="text_color">
										<span>{{userStat.wxCount ? userStat.wxCount : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">师傅总用户</div>
									<div class="text_color">
										<span>{{userStat.sumAuthUserCount ? userStat.sumAuthUserCount : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">h5师傅用户</div>
									<div class="text_color">
										<span>{{userStat.h5AuthCount ? userStat.h5AuthCount : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">app师傅用户</div>
									<div class="text_color">
										<span>{{userStat.appAuthCount ? userStat.appAuthCount : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">小程序师傅用户</div>
									<div class="text_color">
										<span>{{userStat.wxAuthCount ? userStat.wxAuthCount : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="订单收入分析" name="fourth">
					<el-table v-loading="tableDataLoading" :data="tableData2.records">
						<el-table-column prop="ordersId" label="编号">
						</el-table-column>
						<el-table-column prop="userName" label="用户名">
							<template slot-scope="scope">
								<el-button size="mini" style="color: #4f9dec;background: #fff;border: none;padding: 0;" type="primary"
									:disabled="!isAuth('userList:details')" @click="updates1(scope.row)">
									{{scope.row.userName ? scope.row.userName : '未绑定'}}
								</el-button>
								<!-- <span style="color: #4f9dec;cursor: pointer;"
									@click="updates1(scope.row)">{{scope.row.userName ? scope.row.userName : '未绑定'}}</span> -->
							</template>
						</el-table-column>
						<el-table-column prop="payMoney" label="支付金额">
						</el-table-column>
						<el-table-column prop="rate" label="佣金">
						</el-table-column>
						<el-table-column prop="pingRate" label="平台收入">
							<template slot-scope="scope">
								{{scope.row.pingRate}}
							</template>
						</el-table-column>
						<el-table-column prop="createTime" label="创建时间">
						</el-table-column>
					</el-table>
					<div style="text-align: center;margin-top: 10px;float:right">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:page-sizes="[5, 10, 15, 20]" :page-size="limit" :current-page="page"
							layout="total,sizes, prev, pager, next,jumper" :total="tableData2.total">
						</el-pagination>
					</div>
				</el-tab-pane>
				<el-tab-pane label="收益统计" name="shouyi">
					<el-row>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">交易总金额</div>
									<div class="text_color">
										<span>{{tableDataSy.allMoney ? tableDataSy.allMoney : 0}}</span>元</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">陪诊/陪护佣金金额</div>
									<div class="text_color">
										<span>{{tableDataSy.rateMoney ? tableDataSy.rateMoney : 0}}</span>元</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">推广员佣金金额</div>
									<div class="text_color">
										<span>{{tableDataSy.zhiRateMoney ? tableDataSy.zhiRateMoney : 0}}</span>元</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">代理商佣金金额</div>
									<div class="text_color">
										<span>{{tableDataSy.feiRateMoney ? tableDataSy.feiRateMoney : 0}}</span>元</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">平台金额</div>
									<div class="text_color">
										<span>{{tableDataSy.pingRateMoney ? tableDataSy.pingRateMoney : 0}}</span>元</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				limit: 5,
				page: 1,
				tableData: {},
				tableData2: {
					list: [],
					totalCount: 0
				},
				colonelData: [],
				commodityData: [],
				userjfData: [],
				incomeData: [],
				activeName: 'first',
				tableDataLoading: true,
				flag: 1,
				usersumData: {},
				taskStat: {},
				data: '',
				time: '',
				platform: '',
				type: '',
				balance: -1,
				flag: 1,
				info: {
					stockDate: this.getNowTime(), //日期
				},
				flags: [{
					value: 1,
					label: '按天查询'
				}, {
					value: 2,
					label: '按月查询'
				}, {
					value: 3,
					label: '按年查询'
				}],
				userStat:{},
				tableDataSy:{},
			}
		},
		mounted() {
			this.colonel()
			this.taskData()
			this._getData() //用户统计
			// this.incomeSelect()//收入
		},
		methods: {
			// 详情跳转
			updates(row) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: row.userId
					}
				})
			},
			updates1(row) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: row.userId
					}
				})
			},
			updates2(row) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: row.userId2
					}
				})
			},
			handleSizeChange(val) {
				this.limit = val;
				this.colonel();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.colonel();
			},
			// 用户分析选择日期
			animeDat() {
				this._getData()
			},
			// 订单分析选择日期
			animeOrder() {
				this.taskData()
				this.colonel()
				this.userData()
				this.colonelSy()
			},
			// 订单分析年月日
			orderfenxi(value) {
				let vanumber = value
				if (vanumber === 1) {
					this.flag = 1
					this.taskData()
					this.colonel()
					this.userData()
					this.colonelSy()
				}
				if (vanumber === 2) {
					this.flag = 2
					this.taskData()
					this.colonel()
					this.userData()
					this.colonelSy()
				}
				if (vanumber === 3) {
					this.flag = 3
					this.taskData()
					this.colonel()
					this.userData()
					this.colonelSy()
				}
			},
			// Tabs点击事件
			handleClick(tab, event) {
				if (tab._props.label == '订单统计') {
					this.taskData()
				}
				if (tab._props.label == '订单收入分析') {
					this.colonel()
				}
				if (tab._props.label == '用户分析') {
					this.userData()
				}
				if (tab._props.label == '收益统计') {
					this.colonelSy()
				}
				
				
			},
			//处理默认选中当前日期
			getNowTime() {
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth(); //得到月份
				var date = now.getDate(); //得到日期
				var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
				var mm = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
				var ss = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
				month = month + 1;
				month = month.toString().padStart(2, "0");
				date = date.toString().padStart(2, "0");
				var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
				return defaultDate;
				this.$set(this.info, "stockDate", defaultDate);
			},
			// 用户统计
			_getData() {
				this.$http({
					url: this.$http.adornUrl('user/homeMessage'),
					method: 'get',
					params: this.$http.adornParams({})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						let returnData = data.data;
						this.tableData = returnData
					}

				})
			},
			// 收入统计
			//  incomeSelect(){
			//  this.$http({
			// url: this.$http.adornUrl('statistical/income'),
			// method: 'get',
			// params: this.$http.adornParams({
			// })
			//  }).then(({data}) => {
			//   if(data.code == 0){
			// 	  let returnData = data.data;
			// 	  this.incomeData = returnData
			//   }
			//  })
			//  },
			//订单统计
			taskData() {
				this.$http({ 
					url: this.$http.adornUrl('orders/selectOrdersDate'),
					method: 'get',
					params: this.$http.adornParams({
						'time': this.info.stockDate,
						'flag': this.flag,
					})
				}).then(({
					data
				}) => {
					let returnData = data.data;
					this.taskStat = returnData
				})
			},
			// 订单收入分析
			colonel() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('orders/getPingIncome'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'time': this.info.stockDate,
						'flag': this.flag,
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					if (data.code == 0) {
						let returnData = data.data
						this.tableData2 = returnData
					}
				})
			},
			//用户分析（下）
			userData() {
				this.$http({
					url: this.$http.adornUrl('user/userMessage'),
					method: 'get',
					params: this.$http.adornParams({
						'time': this.info.stockDate,
						'flag': this.flag,
					})
				}).then(({
					data
				}) => {
					let returnData = data.data;
					this.userStat = returnData
				})
			},
			// 收益统计
			colonelSy() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('orders/orderStatistics'),
					method: 'get',
					params: this.$http.adornParams({
						'time': this.info.stockDate,
						'flag': this.flag,
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					if (data.code == 0) {
						let returnData = data.data
						this.tableDataSy = returnData
					}
				})
			},
		}
	}
</script>

<style scoped>
	.box {
		padding: 44px;
		border: 1px solid #eee;
		margin: 15px 10px;
	}

	.box_num {
		font-size: 14px;
		color: #66b1ff;
	}

	.box_num .box_color {
		color: #333;
		font-size: 14px;
		margin-bottom: 15px;
	}

	.box_num div span {
		font-size: 20px;
		margin-left: 5px;
	}

	.text_color {
		color: #4f9dec;
	}

	.text_color span {
		margin-right: 5px;
	}
</style>
